<template>

    <button @click="changeNode">修改节点颜色事件</button>

    <h2>添加连线的实例</h2>
    <h2>这个地方有个疑问，如果限制连接线数</h2>

    <div id="chart-diagram" style="background-color: whitesmoke; width: 1000px; height: 1000px;">
    </div>


</template>

<script setup>
    import {onMounted} from 'vue';
    import go from "gojs";

    let myDiagram = null;


    const changeNode = () => {
        var data = myDiagram.model.findNodeDataForKey("Delta");
        // 这个方式可以更新
        if (data !== null) myDiagram.model.setDataProperty(data, "color", "red");
    }

    const init = () => {

        const $ = go.GraphObject.make

        myDiagram = new go.Diagram("chart-diagram", {
            'grid.visible': true, // 显示网格
            'clickCreatingTool.archetypeNodeData': {category: 'Normal', text: '新节点', notice: ''}, // 双击新建节点(可以写入节点的默认信息)；；
            'toolManager.hoverDelay': 100, // tooltip提示显示延时
            'toolManager.toolTipDuration': 10000, // tooltip持续显示时间
            allowMove: true, // 允许拖动画板
            allowDragOut: true, // 允许拖拽节点
            allowDelete: true, // 允许删除节点
            allowCopy: true, // 允许复制节点
            allowClipboard: true, // 允许粘贴节点

        });

        myDiagram.nodeTemplate =
            $(go.Node, "Auto",
                {
                    movable: false,//是否可拖动
                    deletable: false,//是否可删除
                    avoidable: true,
                },
                new go.Binding("location", "loc"),  // get the Node.location from the data.loc value


                $(go.Shape,
                    "Circle",
                    {
                        fill: "white",
                        width: 80,
                        height: 80,
                        alignment: go.Spot.Top, //规定锚点的位置
                        portId: "topSpot", //规定锚点的名称
                        fromSpot: go.Spot.TopSide, //输出点
                        fromLinkable: true,//是否可以输出
                        toSpot: go.Spot.AllSides, //输入点
                        toLinkable: true, //是否可以输入
                        cursor: "pointer",
                        mouseEnter: function (e, port) {
                            if (!e.diagram.isReadOnly) port.fill = "rgba(255,0,255,0.5)";
                        },
                        mouseLeave: function (e, port) {
                            port.fill = "pink";
                        },


                    },
                    new go.Binding("fill", "color")
                ),
                $(go.TextBlock,
                    {margin: 5},
                    new go.Binding("text", "text"))
            );


        var nodeDataArray = [    // for each node specify the location using Point values
            {key: "Alpha", text: 'Alpha1', color: "lightblue", loc: new go.Point(0, 0)},
            {key: "Beta", text: 'Beta1', color: "pink", loc: new go.Point(100, 50)},
            {key: "first", text: 'first1', color: "pink", loc: new go.Point(200, 350)},
            {key: "second", text: 'second1', color: "pink", loc: new go.Point(150, 50)},
            {key: "third", text: 'third1', color: "pink", loc: new go.Point(200, 550)}
        ];

        var linkDataArray = [
            {from: "Alpha", to: "Beta"}

        ];


        // linkDataArray.push({from: "first", to: "second"})
        function linkMouseEnter(e, link) {
            console.log("鼠标移入了到连线了")
            console.log(link)
            link.findObject("changecolor").stroke = "red";
// console.log(link)
        }

        function linkMouseLeave(e, link) {
            console.log("鼠标移入了到连线了")
            console.log(link)
            link.findObject("changecolor").stroke = "black";
// console.log(link)
        }


        myDiagram.linkTemplate =
            $(go.Link,
                {
                    // 链路路由应避开节点
                    routing: go.Link.AvoidsNodes,

                    corner: 2,
                    curve: go.Link.Bezier,

                    fromMaxLinks: 1,  //限制一个连接点的连接次数
                    toMaxLinks: 1,  //限制一个连接点的连接次数


                },
                {mouseEnter: linkMouseEnter, mouseLeave: linkMouseLeave},//线的鼠标移入事件
                $(go.Shape,
                    {margin: 100, name: "changecolor",},
                    new go.Binding("stroke", "color"),  // shape.stroke = data.color
                    new go.Binding("strokeWidth", "thick")),  // shape.strokeWidth = data.thick
                $(go.Shape,
                    {toArrow: "OpenTriangle", fill: null},
                    new go.Binding("stroke", "color"),  // shape.stroke = data.color
                    new go.Binding("strokeWidth", "thick"))  // shape.strokeWidth = data.thick

            );


//==========================
        let adornmentTemplate = $(go.Adornment, "Auto",
            $(go.Shape, {
                    fill: null,
                    stroke: "deepskyblue",
                    strokeWidth: 1.5,
                    strokeDashArray: [4, 2]
                }
            ),
            $(go.Placeholder)
        );


        myDiagram.nodeTemplate.selectionAdornmentTemplate = adornmentTemplate;
        //=================
        let node1 = $(go.Node, "Auto",
            {
                movable: false,//是否可拖动
                deletable: false,//是否可删除
                position: new go.Point(0, 0)
            },
            $(go.Shape, "Rectangle", {width: 500, height: 260, margin: 4, fill: null}),
            $(go.TextBlock, "Kail 51", {background: "yellow"})
        );

        var node2 =
            $(go.Node, "Auto",
                {

                    movable: false,//是否可拖动
                    deletable: false,//是否可删除
                    position: new go.Point(800, 0)
                },

                $(go.Shape, "Ellipse", {width: 240, height: 160, margin: 4, fill: null}),
                $(go.TextBlock, "some text", {background: "yellow"})
            );


        myDiagram.add(node1);
        myDiagram.add(node2);


        myDiagram.add(
            $(go.Link,
                {
                    // 链路路由应避开节点
                    routing: go.Link.Orthogonal, // 线会自动90度转弯（AvoidsNodes自动绕开节点）
                    curve: go.Link.JumpGap, // 线与线相交会自动不重叠（还有go.Link.Bezier贝塞尔曲线）
                    corner: 2,
                    fromMaxLinks: 1,  //限制一个连接点的连接次数
                    toMaxLinks: 1,  //限制一个连接点的连接次数
                },
                {fromNode: node1, toNode: node2},
                $(go.Shape)
            )
        );


        //
        myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

        myDiagram.addDiagramListener('LinkDrawn', function (e) {
            console.log(e.subject.part.data);
        })


    };

    onMounted(() => {
        init();
    });


</script>

<style scoped>

</style>